<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Email － A Single Page App demo using Senna.js</title>

  <!-- Demo -->
  <link rel="shortcut icon" href="http://sennajs.com/images/favicon.ico">
  <link rel="stylesheet" href="../../bower_components/pure/pure-min.css">
  <link rel="stylesheet" href="css/email.css">

  <!-- Using Senna's optional style -->
  <link rel="stylesheet" href="../../build/senna.css">

  <!-- Including Senna -->
  <script src="../../build/globals/senna-debug.js"></script>
</head>
<!-- Initializing Senna via data attributes -->
<body data-senna>
  <div class="senna-loading-bar"></div>

  <div id="layout" class="content pure-g">
    <div id="nav" class="pure-u">
      <a href="#" class="nav-menu-button">Menu</a>

      <div class="nav-inner">
        <div class="header">
          <hgroup>
            <h1 class="brand-title">Email</h1>
            <p class="brand-tagline">A Single Page App demo using Senna.js</p>
          </hgroup>
        </div>
        <button class="primary-button pure-button">Compose</button>

        <div class="pure-menu pure-menu-open">
          <ul>
            <li><a href="#">Inbox <span class="email-count">(7)</span></a></li>
            <li><a href="#">Important</a></li>
            <li><a href="#">Sent</a></li>
            <li><a href="#">Drafts</a></li>
            <li><a href="#">Trash</a></li>
            <li class="pure-menu-heading">Labels</li>
            <li><a href="#"><span class="email-label-personal"></span>Personal</a></li>
            <li><a href="#"><span class="email-label-work"></span>Work</a></li>
            <li><a href="#"><span class="email-label-travel"></span>Travel</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div id="list" class="pure-u-1" data-senna-surface>
      <a class="email-item pure-g" href="index.html">
        <div class="pure-u">
          <img class="email-avatar" alt="Zeno Rocha&#x27;s avatar" height="64" width="64" src="../common/img/zeno.jpg">
        </div>

        <div class="pure-u-3-4">
          <h5 class="email-name">Zeno Rocha</h5>
          <h4 class="email-subject">Introducing Senna.js</h4>
          <p class="email-desc">
            Aliquam ac feugiat dolor. Proin mattis massa sit amet enim iaculis tincidunt. Mauris tempor mi vitae sem.
          </p>
        </div>
      </a>

      <a class="email-item pure-g" href="dudu.html">
        <div class="pure-u">
          <img class="email-avatar" alt="Eduardo Lundgren&#x27;s avatar" height="64" width="64" src="../common/img/dudu.jpg">
        </div>

        <div class="pure-u-3-4">
          <h5 class="email-name">Eduardo Lundgren</h5>
          <h4 class="email-subject">Hello from BrazilJS Conf</h4>
          <p class="email-desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique alias, labore sed, atque eaque sapiente.
          </p>
        </div>
      </a>

      <a class="email-item pure-g" href="jamal.html">
        <div class="pure-u">
          <img class="email-avatar" alt="Pedro Marques&#x27;s avatar" height="64" width="64" src="../common/img/jamal.jpg">
        </div>

        <div class="pure-u-3-4">
          <h5 class="email-name">Pedro Marques</h5>
          <h4 class="email-subject">Himachal Pradesh</h4>
          <p class="email-desc">
            Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla.
          </p>
        </div>
      </a>

      <a class="email-item email-item-selected pure-g" href="henvic.html">
        <div class="pure-u">
          <img class="email-avatar" alt="Henrique Vicente&#x27;s avatar" height="64" width="64" src="../common/img/henvic.jpg">
        </div>

        <div class="pure-u-3-4">
          <h5 class="email-name">Henrique Vicente</h5>
          <h4 class="email-subject">Partiu Buca?</h4>
          <p class="email-desc">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa.
          </p>
        </div>
      </a>

      <a class="email-item pure-g" href="java.html">
        <div class="pure-u">
          <img class="email-avatar" alt="Thiago Rocha&#x27;s avatar" height="64" width="64" src="../common/img/java.jpg">
        </div>

        <div class="pure-u-3-4">
          <h5 class="email-name">Thiago Rocha</h5>
          <h4 class="email-subject">You have few issues assigned</h4>
          <p class="email-desc">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
          </p>
        </div>
      </a>

      <a class="email-item pure-g" href="ynews.html">
        <div class="pure-u">
          <img class="email-avatar" alt="Yahoo! News&#x27; avatar" height="64" width="64" src="../common/img/ynews.png">
        </div>

        <div class="pure-u-3-4">
          <h5 class="email-name">Yahoo! News</h5>
          <h4 class="email-subject">Summary for April 3rd, 2012</h4>
          <p class="email-desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique alias, labore sed.
          </p>
        </div>
      </a>

      <a class="email-item pure-g" href="coelho.html">
        <div class="pure-u">
          <img class="email-avatar" alt="Bruno Coelho&#x27;s Avatar" height="64" width="64" src="../common/img/coelho.jpg">
        </div>

        <div class="pure-u-3-4">
          <h5 class="email-name">Bruno Coelho</h5>
          <h4 class="email-subject">10 tips to build muscles</h4>
          <p class="email-desc">
            Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris.
          </p>
        </div>
      </a>
    </div>

    <div id="main" class="pure-u-1" data-senna-surface>
      <div class="email-content">
        <div class="email-content-header pure-g">
          <div class="pure-u-1-2">
            <h1 class="email-content-title">Partiu Buca?</h1>
            <p class="email-content-subtitle">
              From <a>Henrique Vicente</a> at <span>4:56pm, August 21, 2014</span>
            </p>
          </div>

          <div class="email-content-controls pure-u-1-2">
            <button class="secondary-button pure-button">Reply</button>
            <button class="secondary-button pure-button">Forward</button>
            <button class="secondary-button pure-button">Move to</button>
          </div>
        </div>

        <div class="email-content-body">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
          <p>
            <img src="img/henvic.jpg" alt="" width="500" height="331">
          </p>
          <p>
            Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            Aliquam ac feugiat dolor. Proin mattis massa sit amet enim iaculis tincidunt. Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris. Curabitur ornare arcu quis mi blandit laoreet. Vivamus imperdiet fermentum mauris, ac posuere urna tempor at. Duis pellentesque justo ac sapien aliquet egestas. Morbi enim mi, porta eget ullamcorper at, pharetra id lorem.
          </p>
          <p>
            Donec sagittis dolor ut quam pharetra pretium varius in nibh. Suspendisse potenti. Donec imperdiet, velit vel adipiscing bibendum, leo eros tristique augue, eu rutrum lacus sapien vel quam. Nam orci arcu, luctus quis vestibulum ut, ullamcorper ut enim. Morbi semper erat quis orci aliquet condimentum. Nam interdum mauris sed massa dignissim rhoncus.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script src="js/menu.js"></script>
</body>
</html>
